<template>
	<view class="cart-count">
		<!-- 购物车列表 -->
		<!-- 空时 -->
		<u-empty mode="car" v-if="!cartList.length"></u-empty>
		<!-- 非空时 -->
		<view class="cart-list" v-else>
			<view class="cart-title">购物车列表：</view>
			<view class="list" v-for="(item,index) in cartList" :key="item.id">
				<view class="btn centerboth" v-if="item.selected==true" @click="selectThis(index)">
					<text class="iconfont cart-sel"></text>
				</view>
				<view class="btn centerboth" v-else @click="selectThis(index)">
					<text class="iconfont cart-unsel"></text>
				</view>
				<view class="image-container">
					<image class="cart-image" :src="apiImgPrefix + item.mainPic" mode="aspectFill"></image>
				</view>
				<view class="cart-mes centerboth">
					<view class="g-name line2">{{item.name}}</view>
					<view class="gz-box">
						<uni-tag :inverted="true" :text="`母：${item.specs_female[0]}两 · ${item.specs_female[1]}只`" type="success"
							style="margin-right: 20rpx;" class="uni-tag" />
						<uni-tag :inverted="true" :text="`公：${item.specs_male[0]}两 · ${item.specs_male[1]}只`" type="warning"
							class="uni-tag" />
					</view>
					<view class="price-change-num clearfix">
						<view class="price">￥<text class="yj-price">{{item.price}}</text></view>
						<uni-number-box :min="1" v-model="item.quantity" @change="changeNum(item.quantity,item.id)" />
					</view>
				</view>
			</view>
		</view>

		<!-- 固定底部 -->
		<view class="cart-bottom-btn">
			<view class="all-sel-btn centerboth" @click="allSelectedBtn">
				<text v-if="isAllSelected==true" class="iconfont cart-sel"></text>
				<text v-else class="iconfont cart-unsel"></text>
				全选
			</view>
			<view class="all-cost centerboth">
				合计:<text class="icon">￥</text><text class="money">{{allAmount}}</text>
			</view>
			<view class="cart-btn-box centerboth">
				<view class="del-btn centerboth" @click="delCarts">删除</view>
				<view class="js-btn centerboth" @click="jsCarts">
					结算({{allNumber}})
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		API
	} from '@/config/index.js'
	export default {
		props: ['listData'],
		data() {
			return {
				apiImgPrefix: API + '/api/',
				maskTitle: '',
				cartList: this.listData,
				selectedGoods: [],
				selectedIds: [],
				isAllSelected: false,
				allAmount: '0.00',
				allNumber: 0,
			};
		},
		methods: {
			initListAfterAdd(){
				this.cartList = uni.getStorageSync('cartList');
				// console.log(this.cartList)
				this.getAllMount()
			},
			//获取已勾选的商品ID
			getSelectedIds(flag) {
				const cartList = this.cartList;
				this.selectedIds = [];
				this.selectedGoods = []
				cartList.map(item => {
					if (item.selected === true) {
						this.selectedIds.push(item.id);
						this.selectedGoods.push(item)
					}
				});
				let title = flag === "confirm" ? "结算" : "删除"
				if (this.selectedIds.length == 0) {
					uni.showToast({
						title: `请选择要${title}的商品`,
						icon: 'none'
					})
					return;
				}
			},
			jsCarts() {
				this.getSelectedIds('confirm');
				// console.log('js', this.selectedIds.length)
				if (this.selectedIds.length) {
					uni.$emit('cartSettlement', {data: this.selectedGoods, totalPrice: this.allAmount})
				}
			},
			delCarts() {
				this.getSelectedIds('delete');
				if (this.selectedIds.length) {
					uni.showModal({
						title: "提示",
						content: "是否将选中商品移除?",
						success: (res) => {
							if (res.confirm) {
								let newCartList = this.cartList.filter(item => item.selected !== true)
								this.cartList = newCartList
								this.allSelectedBtn()
								uni.$emit('updateCartList', this.cartList)
								uni.pageScrollTo({
									scrollTop: 0,
									duration: 300
								})
							} else {
								console.log('取消删除')
							}
						}
					})
				}
			},
			selectThis(index) { //选择商品
				let cartList = this.cartList;
				cartList[index].selected = !cartList[index].selected
				// 是否全选
				this.isAllSelected = cartList.every(item => item.selected)
				uni.$emit('updateCartList', this.cartList)

				this.getAllMount();
			},
			allSelectedBtn() { //全选
				this.isAllSelected = !this.isAllSelected;
				let newCartList = this.cartList.map(item => {
					if (this.isAllSelected === true) {
						item.selected = true;
					} else {
						item.selected = false
					}
					return item;
				})
				this.cartList = newCartList;
				uni.$emit('updateCartList', this.cartList)
				this.getAllMount();
			},
			getAllMount() { //计算选中总价
				// 先判断下是否全选
				// this.cartList = this.listData
				if (!this.cartList.length) {
					this.isAllSelected = false
				} else {
					this.isAllSelected = this.cartList.every(item => item.selected)
				}

				let allPrice = 0,
					selNum = 0;
				this.cartList.map(item => {
					if (item.selected) {
						selNum += item.quantity;
						allPrice += parseFloat(item.price) * item.quantity
					}
					return selNum, allPrice
				})
				this.allNumber = selNum;
				this.allAmount = allPrice.toFixed(2);
			},

			changeNum(quantity, id) { //适用于根据数量改变购物车
				var that = this;
				var cartList = that.cartList;
				const index = cartList.findIndex(item => item.id === id);
				if (index !== -1) {
					cartList[index].quantity = quantity;
				}
				uni.$emit('updateCartList', this.cartList)
			},
		}
	}
</script>

<style scoped>
	page {
		background: #f5f5f5;
	}

	view,
	textarea,
	input,
	text,
	button {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: "微软雅黑";
	}

	@font-face {
		font-family: 'iconfont';
		/* project id 1143282 */
		src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot');
		src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff') format('woff'),
			url('https://at.alicdn.com/t/font_1143282_zy7677qexck.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_1143282_zy7677qexck.svg#iconfont') format('svg');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.cart-title {
		font-weight: bold;
		color: #333;
		padding: 0 0 30rpx 20rpx;
		border-bottom: 1px solid #e7e7e7;
		margin-bottom: 20rpx;
	}

	.cart-no:before {
		content: "\e64d";
	}

	.cart-unsel:before {
		content: "\e63a";
	}

	.cart-sel:before {
		content: "\e639";
	}

	.cart-del:before {
		content: "\e622";
	}

	.cart-count {
		width: 100%;
		padding: 30rpx 0 50rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
	}

	.manage-btn {
		width: 100%;
		height: 75rpx;
		background: #FFFFFF;
		text-align: right;
	}

	.manage-btn text {
		font-size: 30rpx;
		color: #ff5a00;
		line-height: 75rpx;
		padding: 0 24rpx;
	}


	.all-sel-btn .iconfont {
		margin-right: 10rpx;
		color: #ff5a00;
	}

	.cart-list {
		width: 100%;
	}

	.cart-list .list {
		width: 100%;
		padding: 20rpx;
		display: flex;
		background: #FFFFFF;
		border-bottom: 1px solid #F5F5F5;
	}

	.cart-list .list .btn {
		width: 70rpx;
		height: 190rpx;
	}

	.cart-list .list .btn .iconfont {
		color: #ff5a00;
		font-size: 38rpx;
	}

	.cart-list .list .image-container {
		width: 190rpx;
		padding-top: 190rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
	}

	.cart-list .list .image-container .cart-image {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		object-fit: cover;
	}


	.cart-list .list .cart-mes {
		margin-left: 20rpx;
		width: calc(100% - 70rpx - 190rpx);
		height: 190rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cart-list .g-name {
		font-size: 28rpx;
		color: #2a2a2a;
		/* height: 38rpx; */
	}


	.cart-list .gz-box {
		font-size: 26rpx;
		color: #999999;
		margin: 10rpx 0;
		display: flex;
	}

	.cart-list .cart-mes .price {
		color: #ff5621;
		font-weight: bold;
		font-size: 24rpx;
	}

	.cart-list .cart-mes .yj-price {
		font-size: 36rpx;
	}

	.cart-list .price .num {
		color: #2a2a2a;
		font-size: 28rpx;
		font-weight: normal;
		float: right;
	}


	.price-change-num {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cart-bottom-btn {
		position: fixed;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		left: 0;
		bottom: 0;
		z-index: 6;
		box-shadow: 0px -5px 10px -5px #d0d0d0;
		display: flex;
		padding-left: 4vw;
		align-items: center;
	}

	.cart-bottom-btn .all-cost {
		margin-left: 30rpx;
	}

	.cart-bottom-btn .all-cost .icon {
		font-size: 28rpx;
		margin-top: 5rpx;
	}

	.cart-bottom-btn text {
		color: #ff5621;
		font-size: 38rpx;
	}

	.cart-btn-box {
		height: 100rpx;
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.cart-btn-box view {
		width: 150rpx;
		height: 100%;
		line-height: 100rpx;
		text-align: center;
		cursor: pointer;
	}

	.del-btn {
		background: #f3a73f;
		color: #FFFFFF;
	}

	.js-btn {
		background: #ff5a00;
		color: #FFFFFF;
	}
</style>